<template>
    <div class="shift">
        <div class="topbox">
            <!-- <div class="t1" :key="2" :class="{ isActive: active == 2 }" @click="setActive(2)" >2打卡</div>
            <div class="t2" :key="4" :class="{ isActive: active == 4 }" @click="setActive(4)" >4打卡</div> -->
        </div>
        <div class="bottom">
            <div class="bottomCenter">
                <el-form label-position="top" label-width="80px"  :model="formData" ref="reportRef2">
                    <el-form-item label="打卡方式" prop="num" :rules="{ required: true, message: '请选择打卡方式', trigger: 'change' }">
                        <el-radio-group v-model="formData.num" >
                        <el-radio :label="2" size="large">2打卡</el-radio>
                        <el-radio :label="4" size="large">4打卡</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="打卡时间1" prop="startTime1" :rules="{ required: true, message: '请选择时间', trigger: 'change' }">
                        <el-time-select
                            v-model="formData.startTime1"
                            :max-time="formData.endTime2"
                            start="07:00"
                            step="00:15"
                            end="12:00"
                            placeholder="请选择"
                        />
                    </el-form-item>
                        <el-form-item label="打卡时间2" prop="endTime1" :rules="{ required: true, message: '请选择时间', trigger: 'change' }">
                        <el-time-select
                            v-model="formData.endTime1"
                            :min-time="formData.startTime1"
                            start="07:00"
                            step="00:15"
                            end="12:00"
                            placeholder="请选择"
                        />
                    </el-form-item>
                        <el-form-item v-if="formData.num == 4" label="打卡时间3" prop="startTime2" :rules="{ required: true, message: '请选择时间', trigger: 'change' }">
                        <el-time-select
                            v-if="formData.num == 4"
                            v-model="formData.startTime2"
                            :min-time="formData.endTime1"
                            start="12:00"
                            step="00:15"
                            end="19:00"
                            placeholder="请选择"
                        />
                    </el-form-item>
                        <el-form-item v-if="formData.num == 4" label="打卡时间4" prop="endTime2" :rules="{ required: true, message: '请选择时间', trigger: 'change' }">
                        <el-time-select
                            v-if="formData.num == 4"
                            v-model="formData.endTime2"
                            :min-time="formData.startTime2"
                            start="12:00"
                            step="00:15"
                            end="19:00"
                            placeholder="请选择"
                        />
                    </el-form-item>
                </el-form>
                <div class="buttom">
                    <el-button class="addButton" @click="addItem" >确认修改</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getShift, updShift, addShift } from '@/api/shift';
const { proxy } = getCurrentInstance();
const active = ref(4);
const data = reactive({
    formData: {
        startTime1: '',
        endTime1: '',
        startTime2: '',
        endTime2: '',
        num:undefined
    }
})
const setActive = (type) => {
    active.value = type;
    formData.value.num = type;
    //getReportList(queryParams.value);
}
const { formData } = toRefs(data);


const getList = () => {
    getShift().then(res => {
        if (res.code === 200) {
            formData.value = res.data;
        }
    })
}
const addItem = () => {
    if (formData.value.num == 2) {
        formData.value.startTime2 = undefined;
        formData.value.endTime2 = undefined;
    }
    proxy.$refs['reportRef2'].validate((valid) => {
        if (valid) {
            if (formData.value.id) {
                updShift(formData.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    getList();
                })
            } else {
                addShift(formData.value).then(res => {
                    proxy.$modal.msgSuccess("新增成功");
                    getList();
                })
            } 
        }
    });
    //console.log(formData.value);
}
getList();
</script>
<style lang="scss" scoped>
$fontSize:14px;
$color:#BE1A21;
$display:flex;
$alignItems:center;
$justifyContent:center;
    .shift{
        height: 100%;
        // background-color: #ffffff;
        border-radius: 10px;
        
        .topbox {
            display: flex;
            width: 61%;
            div {
                padding: 12px 55px;
                color: #fff;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                cursor: pointer;
            }
            div:nth-child(1) {
                background-color: #FFABB3;
                border-radius: 10px 10px 0px 0px;
            }
            div:nth-child(2) {
                background-color: #FFABB3;
                border-radius: 10px 10px 0px 0px;
            }
	    }
        .bottom{
            background: #fff;
            height: 100%;
            border-radius: 10px 10px 10px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            .bottomCenter{
                width: 95%;
                height:90%;
                margin:56px 72px;
                .el-row{
                    height: 60px;
                    line-height: 60px;
                }
            }
        }
        .addButton{
            background: $color;
            border-color: $color;
            color:#ffffff;
        }
        .isActive {
            color: #be1a21ff !important;
            background-color: #fff  !important;
        }
    }
    
</style>